<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">文件管理</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>文件管理</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <!-- 搜索条件 -->
        <div class="layui-form toolbar">
            <form id="searchForm" onsubmit="return false;">
                文件名称：<input name="title" class="layui-input search-input" type="text" placeholder="输入文件名称"/>&emsp;

                <button id="content-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
                </button>
            </form>
        </div>
        <!-- 表格顶部操作列 -->
        <script type="text/html" id="file-toolbar">
            <div class="layui-btn-container">

                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add"><i
                        class="layui-icon"></i>添加
                </button>

            </div>
        </script>
        <table class="layui-table" id="file-table" lay-filter="file-table"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="file-table-bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="fileDownload">下载</a>
</script>

<script>
    layui.use(['form', 'table', 'config', 'crown'], function () {
        var table = layui.table;
        var config = layui.config;
        var layer = layui.layer;
        var crown = layui.crown;

        // 渲染表格
        var fileTable;

        var renderTable= function(){
            fileTable = table.render({
                elem: '#file-table',
                toolbar: '#file-toolbar',
                url: config.serverUrl + '/file',
                request: config.request,
                parseData: config.parseData,
                response: config.response,
                headers: {Authorization: config.getToken()},
                page: true,
                cols: [[
                    {field: 'id', title: 'ID'},
                    {field: 'fileName', align: 'center', sort: true, title: '名称'},
                    {field: 'fileType', align: 'center', sort: true, title: '类型'},
                    {field: 'fileAddress', align: 'center', sort: true, title: '文件路径'},
                    {field: 'createTime', align: 'center', sort: true, title: '创建时间'},
                    {fixed: 'right', align: 'center', toolbar: '#file-table-bar', title: '操作'}
                ]]
            });
        };


        renderTable();

        // 表格顶部操作列
        table.on('toolbar(file-table)', function (obj) {
            if (obj.event === 'add') {
                showEditModel()
            }
        });

        // 工具条点击事件
        table.on('tool(file-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'fileDownload') {

                window.location.href="/file/download/"+data.id;

            }
        });

        var showEditModel = function () {

            crown.popupCenter({
                title: '添加文件',
                path: 'components/views/file/form.html',
                finish: function () {
                    renderTable();
                }
            });
        };

        // 搜索按钮点击事件
        $('#file-btn-search').click(function () {
            fileTable.reload({where: crown.getSearchForm()});
        });
    });
</script>